<template>
    <div>
        <div class="search1">
            <div class="title">
                <span class="el-icon-search"></span><span> 筛选搜索</span>
            </div>
            <div>
                <SupInput
                :InpList='InpList'
                :BtnList='BtnList'
                :selList='selList'
                :isTitle='true'
                :isMultiple='false'
                @clickFn='searFn'
                @selFn='chOpFn'
                />
            </div>
        </div>
        <div class="shuju">
            <span class="el-icon-tickets"></span><span> 数据列表</span>
        </div>
        <div>
            <Suptable
                :tableData='tableData'
                :pagenum="pagenum"
                :pagesize="pagesize"
                :total="total"
                :headerData="headerData"
                @handleSizeChange="SizeChangeFn"
                @handleCurrentChange="CurrentChangeFn"
            >
                <template v-slot:opera='{ row }'>
                     <el-button
                        size="mini"
                        @click="handleEdit(row.row)">查看订单</el-button>
                        <el-button
                        size="mini"
                        :type="row.row.orderStatus==1?'danger':''"
                        @click="handleBtnFn(row.row)">
                        {{row.row.orderStatus==1?'删除订单':row.row.orderStatus==2?'取消订单':row.row.orderStatus==3?'订单发货':'订单跟踪'}}
                        </el-button>
                </template>
            </Suptable>
        </div>
        <div>
            <el-dialog
                title="订单跟踪"
                :visible.sync="centerDialogVisible1"
                width="30%"
                center>
                <div style="height: 300px;">
                    <el-steps direction="vertical" :active="status1==4?4:5" finish-status="success">
                        <el-step title="订单已提交，等待付款"></el-step>
                        <el-step title="订单付款成功"></el-step>
                        <el-step :title="'在'+addr1+'发出'"></el-step>
                        <el-step :title="'到达目的地'+addr2+',快件将进行派送'"></el-step>
                        <el-step title="订单代签收"></el-step>
                        <el-step title="订单已签收,期待在次为你服务"></el-step>
                    </el-steps>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import {orderList,cancelOrder,detOrder,queryOrder} from "@/api/orderMock"
import SupInput from "@/components/SupInput"
import Suptable from "@/components/Suptable"
import {SetCookie} from "@/config/config"
export default {
    name:'orderManage',
    data(){
        return{
            pagenum:1,
            pagesize:10,
            total:0,
            tableData:[],
            headerData:[
                {
                    prop:"id",
                    label:"订单编号",
                },
                {
                    prop:"time",
                    label:"提交时间",
                    width:'200'
                },
                {
                    prop:"account",
                    label:"用户账号",
                },
                {
                    prop:"allPrice",
                    label:"订单金额",
                },
                {
                    prop:"payMethod",
                    label:"支付方式",
                },
                {
                    prop:"source",
                    label:"订单来源",
                },
                {
                    prop:"orderS",
                    label:"订单状态",
                },
            ],
            InpList:[
                {
                    title:'输入搜索：',
                    model:'',
                    text:'订单编号',
                },
                {
                    title:'收货人：',
                    model:'',
                    text:'收货人姓名/手机号',
                }
            ],
            selList:[
                {
                    tit:'订单状态：',
                    title:'全部',
                    value:'',
                    options:[
                        {
                            value:'1',
                            label:'已取消'
                        },
                        {
                            value:'2',
                            label:'待付款'
                        },
                        {
                            value:'3',
                            label:'待发货'
                        },
                        {
                            value:'4',
                            label:'已发货'
                        },
                        {
                            value:'5',
                            label:'已完成'
                        },
                    ]
                },
                {
                    tit:'订单分类：',
                    title:'全部',
                    value:'',
                    options:[
                        {
                            value:'1',
                            label:'正常订单'
                        },
                        {
                            value:'2',
                            label:'秒杀订单'
                        }
                    ]
                },
                {
                    tit:'订单来源：',
                    title:'全部',
                    value:'',
                    options:[
                        {
                            value:'1',
                            label:'App'
                        },
                        {
                            value:'2',
                            label:'PC端'
                        }
                    ]
                },
            ],
            BtnList:[
                {
                    name:"查询",
                    icon:'el-icon-search'
                },
                {
                    name:"重置",
                    icon:''
                },
            ],
            centerDialogVisible1:false,
            addr1:'',
            addr2:'',
            data1:{},
            status1:'',
        }
    },
    mounted(){
        let _self = this;
        _self.orderListFn()
    },
    components:{SupInput,Suptable},
    methods:{
        //获取数据列表
        orderListFn(){
            let _self = this;
            let data = {
                pagenum:_self.pagenum,
                pagesize:_self.pagesize
            };
            orderList(data).then(res=>{
                if(res.meta.status==200){
                    _self.tableData = [];
                    _self.total = res.data.total;
                    for(let item of res.data.user){
                        let Allprice = 0;
                        for(let items of item.goodsList){
                            Allprice+=items.price*items.num
                        }
                         Allprice =  Allprice
                         +item.preChildren.freight
                         -item.preChildren.active
                         -item.preChildren.coupons
                         -item.preChildren.integral
                         -item.preChildren.discount
                        let arr = ['已取消' ,'待付款', '待发货' ,'已发货','已完成']
                        let orderS = arr[item.orderStatus-1]
                        _self.tableData.push({
                            account: item.account,
                            allPrice: "￥"+Allprice.toFixed(2),
                            goodsList: item.goodsList,
                            id: item.id,
                            logistics: item.logistics,
                            orderNote: item.orderNote,
                            orderStatus:item.orderStatus,
                            orderS:orderS,
                            ordertype: item.ordertype==1?'正常订单':'秒杀订单',
                            payMethod: item.payMethod==1?'未支付':item.payMethod==2?'微信':'支付宝',
                            preChildren:item.preChildren,
                            reward: item.reward,
                            singleNum:item.singleNum,
                            source: item.source==1?'App':'PC端',
                            time: item.time,
                            userChlidren: item.userChlidren,
                        })
                    }
                }
            })
        },
        SizeChangeFn(val){
            let _self = this;
            _self.pagesize = val;
            _self.orderListFn()
        },
        CurrentChangeFn(val){
            let _self = this;
            _self.pagenum = val;
            _self.orderListFn()
        },
        //订单详情
        handleEdit(row){
            let _self = this;
            SetCookie('id',row.id)
            _self.$router.push('/orders/orderDetail')
        },
        //订单操作
        handleBtnFn(row){
            let _self = this;
            //订单发货
            if(row.orderStatus==3){
                // _self.$router.push({
                //     name:'delivery',
                //     params:{id:row.id}
                // })
                SetCookie('id',row.id)
                _self.$router.push('/orders/delivery')
            }else if(row.orderStatus==4 || row.orderStatus==5){
                //订单跟踪
                for(let item of _self.tableData){
                    if(item.id==row.id){
                        _self.addr1=item.userChlidren[0].deliAddr;
                        _self.addr2=item.userChlidren[0].address;
                        _self.status1 = item.orderStatus
                    }
                }
                _self.centerDialogVisible1 = true
            }else if(row.orderStatus==1){
                _self.$confirm('是否确定删除订单', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {
                        id:row.id
                    }
                    detOrder(data).then(res=>{
                        if(res.meta.status==200){
                            _self.orderListFn()
                        }
                    })
                })
            }else if(row.orderStatus==2){
                _self.$confirm('是否确定取消订单', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {
                        id:row.id
                    }
                    cancelOrder(data).then(res=>{
                        if(res.meta.status==200){
                            _self.orderListFn()
                        }
                    })
                })
            }
        },
        //搜索和清空
        searFn(index){
            let _self = this;
            if(index==0){//搜索
                _self.data1.id = _self.InpList[0].model?_self.InpList[0].model:0;
                _self.data1.username = _self.InpList[1].model?_self.InpList[1].model:''
                queryOrder(_self.data1).then(res=>{
                    // console.log(res);
                    if(res.meta.status==200){
                        _self.tableData = [];
                        _self.total = res.data.total;
                        _self.pagesize = res.data.pagesize;
                        for(let item of res.data.arr){
                            let Allprice = 0;
                            for(let items of item.goodsList){
                                Allprice+=items.price*items.num
                            }
                            Allprice =  Allprice
                            +item.preChildren.freight
                            -item.preChildren.active
                            -item.preChildren.coupons
                            -item.preChildren.integral
                            -item.preChildren.discount
                            let arr = ['已取消' ,'待付款', '待发货' ,'已发货','已完成']
                            let orderS = arr[item.orderStatus-1]
                            _self.tableData.push({
                                account: item.account,
                                allPrice: "￥"+Allprice.toFixed(2),
                                goodsList: item.goodsList,
                                id: item.id,
                                logistics: item.logistics,
                                orderNote: item.orderNote,
                                orderStatus:item.orderStatus,
                                orderS:orderS,
                                ordertype: item.ordertype==1?'正常订单':'秒杀订单',
                                payMethod: item.payMethod==1?'未支付':item.payMethod==2?'微信':'支付宝',
                                preChildren:item.preChildren,
                                reward: item.reward,
                                singleNum:item.singleNum,
                                source: item.source==1?'App':'PC端',
                                time: item.time,
                                userChlidren: item.userChlidren,
                            })
                        }
                    }else{
                        _self.pagesize = 10;
                        _self.orderListFn()
                    }
                })
            }else if(index==1){
                for(let item of _self.InpList){
                    item.model = ''
                }
                for(let item of _self.selList){
                    item.value = ''
                }
                _self.data1={}
            }
        },
        chOpFn(index){
            let _self = this;
            if(index==0){
                _self.data1.orderStatus = _self.selList[0].value
            }else if(index==1){
                _self.data1.ordertype = _self.selList[1].value
            }else if(index==2){
                _self.data1.source = _self.selList[2].value
            }
        }
    },
}
</script>
<style scoped>
.search1{
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #EBEEF5;
    border-radius: 10px;
}
.shuju{
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #EBEEF5;
    border-radius: 10px;
}
.title{
    margin-bottom: 20px;
}
</style>